//视口适配
let mychart1;
let mychart2;
function getRem() {
  //获取屏幕大小
  let windowWidth = $("html").outerWidth();
  //判断视口大小
  if (windowWidth < 1024) windowWidth = 1024;
  if (windowWidth > 1920) windowWidth = 1920;
  //赋值rem
  let rem = windowWidth / 100 + "px";
  $("html").css({ fontSize: rem });
  //当窗口变化,图表跟随变化
}
//即时启动
getRem();
//改变视口,根字号随视口变动
$(window).on("resize", function () {
  getRem();
  mychart1.resize();
  mychart2.resize();
});
//点击提交功能
let arr = [];
let uname = [];
let point = [];
let price = [];
!(function () {
  //声明数组
  $(".btn").on("click", function () {
    //判断条件
    if (!$(".username").val()) {
      alert("姓名不可为空");
      return;
    } else if (!$(".point").val()) {
      alert("评分不可为空");
      return;
    } else if (!$(".price").val()) {
      alert("薪资不可为空");
      return;
    }
    if ($("tbody").text()) {
      $("thead tr").addClass("change");
    }
    else{
      $("thead tr").removeClass("change");
    }
    //在数组内添加对象
    arr.unshift({
      username: $(".username").val(),
      point: $(".point").val(),
      price: $(".price").val(),
    });
    //渲染前清空容器
    $("tbody").empty();
    //每次添加前清空数组
    uname = [];
    point = [];
    price = [];
    //渲染数组
    $.each(arr, (index, item) => {
      //遍历创建tr
      $(`
      <tr>
        <td>${item.username}</td>
        <td>${item.point}</td>
        <td>${item.price}</td>
      </tr>
      `).appendTo($("tbody"));
      //创建的同时将arr数组内的数据给到其他的数组中
      uname.unshift(item.username);
      point.unshift(+item.point);
      price.unshift(+item.price);
    });
    //清空输入的文本
    $(".username").val("");
    $(".point").val("");
    $(".price").val("");
    //点击刷新折线图
    getCategory();
    //点击刷新柱状图
    getPictorialBar();
  });
})();
//折线图
function getCategory() {
  mychart1 = echarts.init($(".up")[0]);
  let option = {
    title: {
      text: "评分",
      left: "3%",
      top: "5%",
      textStyle: {
        color: "rgba(232, 94, 106, .5)",
        fontSize: 20,
      },
    },
    grid: {
      top: "20%",
      left: "5%",
      right: "5%",
      bottom: "20%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      //姓名数据填充至此
      data: uname,
      axisLabel: {
        color: "#999",
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
        length: 25,
        lineStyle: {
          color: "#ffffff1f",
        },
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: "#ffffff1f",
        },
      },
    },
    yAxis: [
      {
        type: "value",
        position: "right",
        axisLabel: {
          margin: 20,
          color: "#999",
        },

        axisTick: {
          show: true,
          length: 15,
          lineStyle: {
            color: "#ffffff1f",
          },
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: "#ffffff1f",
          },
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#fff",
            width: 2,
          },
        },
      },
    ],
    series: [
      {
        name: "注册总量",
        type: "line",
        smooth: true, //是否平滑曲线显示
        showAllSymbol: true,
        symbol: "circle",
        symbolSize: 6,
        lineStyle: {
          normal: {
            color: "rgba(232, 94, 106, .5)", // 线条颜色
          },
        },
        label: {
          show: true,
          position: "top",
          textStyle: {
            color: "rgba(232, 94, 106, .8)",
          },
        },
        itemStyle: {
          color: "red",
          borderColor: "#999",
          borderWidth: 3,
        },
        tooltip: {
          show: false,
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(232, 94, 106, .8)",
                },
                {
                  offset: 1,
                  color: "rgba(232, 94, 106, .1)",
                },
              ],
              false
            ),
          },
        },
        //评分数据插入处
        data: point,
      },
    ],
  };
  mychart1.setOption(option);
}
//柱状图
function getPictorialBar() {
  mychart2 = echarts.init($(".down")[0]);
  let option = {
    title: {
      text: "薪资",
      left: "3%",
      top: "5%",
      textStyle: {
        color: "rgba(232, 94, 106, .5)",
        fontSize: 20,
      },
    },
    grid: {
      left: "12%",
      top: "20%",
      bottom: "12%",
      right: "8%",
    },
    xAxis: {
      data: uname,
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255, 129, 109, 0.1)",
          width: 2, //这里是为了突出显示加上的
        },
      },
      axisLabel: {
        textStyle: {
          color: "#999",
          fontSize: 12,
        },
      },
    },
    yAxis: [
      {
        splitNumber: 2,
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "rgba(255, 129, 109, 0.1)",
            width: 2, //这里是为了突出显示加上的
          },
        },
        axisLabel: {
          textStyle: {
            color: "#999",
          },
        },
        splitArea: {
          areaStyle: {
            color: "rgba(255,255,255,.5)",
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(255, 129, 109, 0.1)",
            width: 0.5,
            type: "dashed",
          },
        },
      },
    ],
    series: [
      {
        name: "薪资",
        type: "pictorialBar",
        barCategoryGap: "0%",
        symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
        label: {
          show: true,
          position: "top",
          distance: 15,
          color: "#DB5E6A",
          fontWeight: "bolder",
          fontSize: 18,
        },
        itemStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(232, 94, 106, .8)", //  0%  处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(232, 94, 106, .1)", //  100%  处的颜色
                },
              ],
              global: false, //  缺省为  false
            },
          },
          emphasis: {
            opacity: 1,
          },
        },
        data: price,
        z: 10,
      },
    ],
  };
  mychart2.setOption(option);
}
